<template>
	<view class="container">
		<view class="search bg-fff">
			<!-- <u-navbar title="已完成订单列表" :background="{ backgroundColor: '#fff' }" :border-bottom="false"
				back-icon-color="#000">
			</u-navbar> -->
			<u-search placeholder="请输入商品名称" :show-action="false" v-model="pageForm.keywords" height="56"
				@search="search"></u-search>
			<view class="picker-box">
				<view class="time-box">
					<picker mode="date" :value="pageForm.start_time" @change="startDateChange" @cancel="cancelStart">
						<view class="uni-input">{{ pageForm.start_time || '请选择时间' }}</view>
					</picker>
				</view>
				<view class="to-time">
					至
				</view>
				<view class="time-box">
					<picker mode="date" :value="pageForm.end_time" @change="endDateChange" @cancel="cancelEnd">
						<view class="uni-input">{{ pageForm.end_time || '请选择时间' }}</view>
					</picker>
				</view>
				<view class="btn-query" @click="search">
					查询
				</view>
			</view>
		</view>

		<view style="height: 160rpx;" :style="'marginTop:' + Top + 'px'"></view>
		<view class="delivery-list">
			<view class="delivery-item bg-fff" v-for="(item, index) in deliveryList" :key="index"
				@click="jump('/pages/mine/delivery/delivery_info?order_id=' + item.order_id)">
				<view class="delivery-item-status flex-center">
					<text style="color: #E80D0D;">已完成</text>
				</view>

				<view class="delivery-item-operate flex-space-between" style="margin-top: 0;">
					<view class="delivery-item-remark">订单编号：{{ item.order_no }}</view>
				</view>

				<view class="product-item flex" v-for="(it, idx) in item.product" :key="idx">
					<image class="product-item-image" :src="it.image.file_path"></image>
					<view class="product-item-con">
						<view class="product-item-name u-line-1">{{ it.product_name }}</view>
						<view class="product-item-suk">{{ it.product_attr }}</view>
						<view class="flex-space-between">
							<view class="product-item-num">x{{ it.total_num }}</view>
							<view class="product-item-price">￥{{ it.product_price }}</view>
						</view>
					</view>
				</view>
				<view class="product-item flex product-item-gift" v-if="item.gift_product_order">
					<image style="width: 100rpx;height: 100rpx;" :src="item.gift_product_order.file.file_path"></image>
					<view class="product-item-con">
						<view class="product-item-name u-line-1">{{item.gift_product_order.gift_product.product_name}}</view>
						<view class="product-item-suk"></view>
						<view class="flex-space-between">
							<view class="product-item-num">x1</view>
							<view class="product-item-price">赠品</view>
						</view>
					</view>
				</view>

				<view class="flex-space-between product-total">
					<view>优惠：<text>￥{{ item.coupon_money_sys }}</text></view>
					<view>总价：<text>￥{{ item.total_price }}</text></view>
					<view>实付：<text>￥{{ item.pay_price }}</text></view>
				</view>

				<view class="delivery-item-address flex">
					<view class="delivery-item-address-song flex-center">送</view>
					<view class="delivery-item-address-test">
						{{ item.address.region.province }}{{ item.address.region.city }}{{ item.address.region.region
						}}{{ item.address.detail }}
					</view>
				</view>

				<view class="delivery-item-operate flex-space-between">
					<view class="delivery-item-remark">备注：{{ item.buyer_remark }}</view>
					<!-- <b-u-button-theme width="182rpx" height="56rpx" size="26rpx" @click="handleReceiving(item)" v-if="(tabsCurrent == 0 || tabsCurrent == 1) && (item.order_source != 30 || (item.order_source == 30 && item.assemble_status == 20))">立即接单</b-u-button-theme>
					
					<b-u-button-grey width="182rpx" height="56rpx" size="26rpx" v-if="(tabsCurrent == 0 || tabsCurrent == 1) && item.order_source == 30 && item.assemble_status != 20">立即接单</b-u-button-grey>
					
					<b-u-button-theme width="182rpx" height="56rpx" size="26rpx" @click="jump('/pages/mine/delivery/finish?order_id='+item.order_id)" v-if="tabsCurrent == 2">已送达</b-u-button-theme> -->
				</view>

				<view class="delivery-item-operate flex-space-between">
					<view class="delivery-item-remark"></view>
					<view class="flex-align-center">
						<b-u-button-theme width="182rpx" height="56rpx" size="26rpx" @click="handleReceiving(item)"
							v-if="(tabsCurrent == 0) && (item.order_source != 30 || (item.order_source == 30 && item.assemble_status == 20))">立即接单</b-u-button-theme>

						<b-u-button-grey width="182rpx" height="56rpx" size="26rpx"
							v-if="(tabsCurrent == 0) && item.order_source == 30 && item.assemble_status != 20">立即接单</b-u-button-grey>
						<b-u-button-theme width="182rpx" height="56rpx" size="26rpx"
							@click="jump('/pages/mine/delivery/pick_delivery?order_id=' + item.order_id)"
							v-if="tabsCurrent == 1 && item.is_claim == 0">待取货</b-u-button-theme>
						<b-u-button-theme width="182rpx" height="56rpx" size="26rpx"
							@click="jump('/pages/mine/delivery/finish?order_id=' + item.order_id)"
							v-if="tabsCurrent == 1" style="margin-left: 30rpx;">待送达</b-u-button-theme>
					</view>
				</view>

				<view class="delivery-item-time" v-if="tabsCurrent == 2">送达时间：{{ item.receipt_time }}</view>
			</view>
		</view>

		<view>
			<b-u-loadmore :status="loadmoreStatus"></b-u-loadmore>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Top: uni.getSystemInfoSync().statusBarHeight,
			tabsCurrent: 2,
			deliveryList: [],
			pageForm: {
				order_source: 0,
				dataType: 'shopper_comment',
				page: 1,
				pay_source: 'wx',
				list_rows: 10,
				start_time:'',
				end_time:'',
				keywords:''
			},
			loadmoreStatus: 'nomore',
		}
	},
	onLoad() { 
		let token_type = uni.getStorageSync('token_type') || 2;
		if (token_type == 1) {
		    this.pageForm.dataType  = "comment"
		}
	},
	onShow() {
		this.deliveryList = [];
		this.getDeliveryLists();
	},
	onReachBottom() {
		if (this.loadmoreStatus == 'nomore') {
			return;
		}
		this.pageForm.page++;
		this.getDeliveryLists();
	},
	methods: {
		startDateChange(e) {
			this.pageForm.start_time = e.detail.value
		},
		endDateChange(e) {
			this.pageForm.end_time = e.detail.value
		},
		cancelStart() {
			this.pageForm.start_time = ''
		},
		cancelEnd() {
			this.pageForm.end_time = ''
		},
		search() {
			if(this.pageForm.start_time || this.pageForm.end_time){
				if(!this.pageForm.start_time || !this.pageForm.end_time){
					uni.showToast({
							title: "请选择时间",
							icon: "none"
						})
						return 
				}
			}
			this.pageForm.page = 1;
			this.deliveryList = [];
			this.getDeliveryLists();
		},
		getDeliveryLists() {
			this.loadmoreStatus = 'loading';
			uni.$u.api.deliveryOrderLists(this.pageForm).then(res => {
				this.deliveryList = this.deliveryList.concat(res.list.data);
				this.loadmoreStatus = 'loadmore';
				if (this.deliveryList.length == res.list.total) {
					this.loadmoreStatus = 'nomore';
				}
				uni.stopPullDownRefresh();
			})
		},
		jump(url) {
			uni.navigateTo({
				url: url
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.container {
	.search {
		padding: 16rpx 30rpx 0;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 980;
	}

	.picker-box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx 0;
	}

	.time-box {
		background-color: #d3d3d3;
		border-radius: 10rpx;
		text-align: center;
		line-height: 50rpx;
		align-items: center;
		font-size: 25rpx;
		padding: 0 20rpx;
		margin: 0 20rpx;

		.uni-input {
			font-size: 26rpx;
		}
	}

	.btn-query {
		color: #fff;
		background-color: #f44747;
		border-radius: 10rpx;
		width: 80rpx;
		text-align: center;
		font-size: 27rpx;
		line-height: 50rpx;
	}


	.delivery-list {
		padding: 30rpx;

		.delivery-item {
			padding: 34rpx;
			border-radius: 16rpx;
			position: relative;
			margin-bottom: 20rpx;

			.delivery-item-status {
				min-width: 174rpx;
				height: 56rpx;
				border-radius: 0rpx 16rpx 0rpx 16rpx;
				background: rgba(232, 13, 13, 0.1);
				padding: 0 5rpx;
				font-size: 24rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
			.product-item-gift {
					margin: 10rpx 0;
					padding: 20rpx;
					background: rgba(225, 225, 225, 0.7);
					border-radius: 20rpx;
				}
			.product-item {
				margin-top: 20rpx;

				.product-item-image {
					width: 128rpx;
					height: 128rpx;
				}

				.product-item-con {
					margin-left: 16rpx;
					flex: 1;

					.product-item-name {
						width: 460rpx;
						font-size: 28rpx;
						color: #111111;
					}

					.product-item-suk {
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 10rpx;
					}

					.product-item-num {
						font-size: 24rpx;
						color: #999999;
					}

					.product-item-price {
						font-size: 28rpx;
						color: $uni-color-theme;
					}
				}
			}

			.product-total {
				margin-top: 20rpx;
				font-size: 24rpx;

				text {
					color: $uni-color-theme;
				}
			}

			.delivery-item-address {
				margin-top: 32rpx;
				border-top: 1px solid rgba(225, 225, 225, 0.7);
				padding-top: 32rpx;

				.delivery-item-address-song {
					width: 56rpx;
					height: 56rpx;
					border-radius: 160rpx;
					background: #F6F6F6;
					font-size: 28rpx;
					color: #BB0024;
				}

				.delivery-item-address-test {
					font-size: 28rpx;
					color: #111111;
					margin-left: 20rpx;
					padding-top: 10rpx;
				}
			}

			.delivery-item-operate {
				margin-top: 12rpx;

				.delivery-item-remark {
					font-size: 28rpx;
					color: #666666;
					margin-right: 20rpx;
					word-wrap: break-word;
					word-break: break-all;
				}

				.transferred_order {
					width: 170rpx;
					color: #666;
					background-color: #d1d1d1;
					border-radius: 30rpx;
					line-height: 56rpx;
					text-align: center;
					margin-right: 30rpx;
					font-size: 26;
				}
			}

			.delivery-item-time {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: $uni-color-theme;
			}
		}
	}
}
</style>
